<template>
    <el-card class="box-card">
        <!-- 卡片顶部添加品牌按钮 -->
        <el-button type="primary" size="default" icon="Plus">
            添加品牌
        </el-button>
        <!-- 表格组件 -->
        <el-table style="margin: 10px 0" border :data="[1]">
            <el-table-column
                label="序号"
                width="80px"
                align="center"
            ></el-table-column>
            <el-table-column label="品牌名称"></el-table-column>
            <el-table-column label="品牌LOGO"></el-table-column>
            <el-table-column label="品牌操作">
                <template #default="{ row, $index }">
                    <el-button size="small" @click="handleEdit(row, $index)">
                        Edit
                    </el-button>
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(row, $index)"
                    >
                        Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器组件 -->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="limit"
            :page-sizes="[3, 5, 7, 9]"
            :background="true"
            layout=" prev, pager, next,jumper, sizes,total, "
            :total="400"
        />
    </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let pageNo = ref<number>(1) //当前页
let limit = ref<number>(3) //每页显示条数

let handleEdit = (row: any, index: number) => {
    console.log(row, index)
}
let handleDelete = (row: any, index: number) => {
    console.log(row, index)
}
</script>

<style scoped></style>
